.search-list-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $clr-white;
  transform: translateX(100%);
  transition: all .3s;
  z-index: 9;
  &.show {
    transform: translateX(0);
  }
  .search-bar-outer {
    height: px(44);
    .search-bar {
      padding: px(8) px(0) px(8) px(16);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        border-top: .01rem solid #eee;
        transform: scaleY(.5);
      }
    }
  }
  input {
    width: px(303);
    height: px(28);
    padding: px(0) px(34);
    display: block;
    float: left;
    background-color: $clr-bg;
    border: none;
    border-radius: px(28);
  }
  svg {
    font-size: px(14);
    color: $clr-g6;
    position: absolute;
    left: px(26);
    top: px(1);
    bottom: px(1);
    margin: auto;
  }
  .search-bar-btn {
    line-height: px(28);
    text-align: center;
    font-size: px(14);
    color: $clr-active;
    float: right;
    padding-right: px(12);
  }
  .search-page-content {
    padding: px(20) px(15) px(20) px(16);
    .search-history-title {
      line-height: px(22);
      font-size: px(16);
      color: $clr-g3;
      margin-bottom: px(15);
    }
    .search-history-list {
      overflow: hidden;
      margin-bottom: px(8);
      .search-history-item {
        width: px(80);
        height: px(30);
        line-height: px(30);
        text-align: center;
        font-size: px(14);
        color: $clr-g3;
        float: left;
        margin-right: px(8);
        margin-bottom: px(12);
        background-color: $clr-bg;
        border-radius: px(30);
        @include ellipsis();
      }
      &>:nth-child(4n) {
        margin-right: px(0);
      }
    }
    .search-history-clear {
      height: px(20);
      line-height: px(20);
      text-align: center;
      font-size: px(14);
      color: $clr-g9;
    }
  }
}